<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>菜单管理</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/libs/layui2.2.5/css/layui.css">
    <style type="text/css">
    .layui-container {
        width: 100%;
    }
    .layui-table-cell .layui-form-checkbox[lay-skin=primary] {
        top: 6px;
        vertical-align: middle;
    }
</style>
</head>
<body class="body">
<div class="layui-container">
   <div class="layui-row layui-col-space30">
       <div class="layui-col-md3">
           <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
              <legend>系统应用列表</legend>
           </fieldset>
           <div style="margin-left: 10px;margin-bottom: 15px">
              <button class="layui-btn layui-btn-xs layui-btn-normal" id="app_add_btn"><i class="layui-icon"></i>新增</button>
              <button class="layui-btn layui-btn-xs layui-btn-normal" id="app_edit_btn"><i class="layui-icon"></i>编辑</button>
              <button class="layui-btn layui-btn-xs layui-btn-danger" id="app_remove_btn"><i class="layui-icon"></i>删除</button>
           </div>
           <ul id="applist"></ul>
       </div>
       <div id="menumanage" class="layui-col-md9">
           <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
              <legend>运维支持系统 菜单列表</legend>
           </fieldset>
           <div style="margin-left: 10px;">
              <button class="layui-btn layui-btn-xs layui-btn-normal" id="menu_add_btn"><i class="layui-icon"></i>新增</button>
              <button class="layui-btn layui-btn-xs layui-btn-normal" id="user_activate_btn"><i class="layui-icon"></i>启用</button>
              <button class="layui-btn layui-btn-xs layui-btn-normal" id="user_deactivate_btn"><i class="layui-icon"></i>禁用</button>
              <button class="layui-btn layui-btn-xs layui-btn-danger" id="menu_remove_btn"><i class="layui-icon"></i>删除</button>
              <button class="layui-btn layui-btn-normal layui-btn-xs" id="parent_btn"><i class="layui-icon">&#xe65c;</i>返回上一级</button>
           </div>
           <table id="menulist"  lay-filter="menulist"></table>
       </div>
   </div>
</div>
<script type="text/html" id="typeTpl">
        {{#  if(d.menuType === 0){ }}
            菜单
        {{#  } else { }}
            按钮
        {{#  } }}
</script>
<script type="text/html" id="showTpl">
        {{#  if(d.isShow === 'true'){ }}
        显示
        {{#  } else { }}
        隐藏
        {{#  } }}
</script>
<script type="text/html" id="barMenu">
        <a class="layui-btn layui-btn-xs" lay-event="child_menu">进入子菜单</a>
</script>


<script type="text/javascript" src="${pageContext.request.contextPath}/static/libs/layui2.2.5/layui.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/libs/layui-xtree.js"></script>
<script type="text/javascript">
    var layIndex = null,tableIns,appId='${domainId}',parentMenuId = '0',menuId = null;
    var $, layer, table,form;
    function menuListLoad(){
        tableIns.reload({
            where: {'appid':appId, 'parentmenuid': parentMenuId}
        });
    }
    /**
     * 关闭弹窗，同时刷新数据列表
     * @param layIndex
     */
    function closeAllLayer() {
        layer.closeAll();
        menuListLoad();
    }

    function closeAllLayer_App() {
        layer.closeAll();
        appListLoad();
    }


    /**
     * 获取应用列表
     */
    function appListLoad() {
        $.ajax({
            type:'get',
            url:'${pageContext.request.contextPath}/sys/app/applist',
            contentType:'application/json;charset=utf-8',
            success:function (data) {
                treeInit(data);
            },
            error:function (error) {
                console.log(error);
            }
        });
    }

    function treeInit(AllList) {
        $('#applist').empty();
        var treeArray = [];
        if(AllList != null && AllList.length > 0){
            for(var i = 0, len = AllList.length;i <len;i++){
                treeArray.push({
                    id: AllList[i]['appId'],
                    name:AllList[i]['appName']
                })
            }
        }

        // 初始化应用列表
        var treeData = {
            elem: '#applist'
            ,nodes:[{
                id:'0'
                , name: '系统根节点'
                , spread:true
                , children: [{
                    id:'1'
                    , name:'基础共享系统'
                    , spread:true
                    , children:[{
                        id:'${domainId}'
                        , name:'运维支持系统'
                    }]
                },{
                    id:'2'
                    , name:'通用系统'
                    , spread:true
                    , children:treeArray
                }]
            }]
            ,click: function(node){
                appId = node.id;

                if(appId != '0'  && appId != '1' && appId != '2'){
                    parentMenuId = '0';
                    $("#menumanage legend").text(node.name + ' 菜单列表');
                }else {
                    parentMenuId = '-1';
                    $("#menumanage legend").text('菜单列表');
                }
                menuListLoad();
            }
        };
        layui.tree(treeData);
    }


    /**
     * 列表初始化
     */
    layui.use(['table','layer','form','tree'], function(){
        $ = layui.jquery
        , table = layui.table
        , layer = layui.layer
        , form = layui.form;

        //初始化应用列表
        appListLoad();

        // 初始化菜单列表
        tableIns = table.render({
            elem: '#menulist'
            ,height: 'full-120'
            ,url: '${pageContext.request.contextPath}/sys/menu/pagelist'
            ,where: {'appid':appId, 'parentmenuid': parentMenuId}
            ,cols: [[
                {checkbox: true, LAY_CHECKED: false} //默认全选
                ,{field: 'menuName', title: '菜单名称'}
                ,{field: 'menuType', title: '菜单类型',templet:'#typeTpl'}
                ,{field: 'href', title: '跳转链接'}
                ,{field: 'target', title: '菜单目标'}
                ,{field: 'icon', title: '菜单图标'}
                ,{field: 'isShow', title: '是否显示', templet:'#showTpl'}
                ,{field: 'sortedNum', title: '排序'}
                ,{field: 'updateTime', title: '修改时间'}
                ,{fixed: 'right', align:'center', title: '操作',toolbar: '#barMenu'}
            ]]
            ,page: true //是否显示分页
            ,limits: [10, 20, 30]
            ,limit: 10 //每页默认显示的数量
        });

        //监听工具条
        table.on('tool(menulist)', function(obj){
            var data = obj.data;
            if(obj.event === 'child_menu'){
                parentMenuId = data.menuId
                menuListLoad();
            }
        });

        /**
         * 新建应用按钮绑定事件
         */
        $("#app_add_btn").click(function () {
            if(layIndex != null || appId != "2") return;
            layIndex = layer.open({
                type: 2,
                title:'应用系统添加',
                area: ['480px', '510px'],
                shade: 0,
                shadeClose:false,
                resize:true,
                content: '${pageContext.request.contextPath}/sys/app/appadd',
                cancel: function(index, layero){
                    layIndex = null;
                    layer.close(index);
                }
            });
        });

        /**
         * 编辑组织机构按钮绑定事件
         */
        $("#app_edit_btn").click(function () {

        });

        /**
         * 删除组织机构按钮绑定事件
         */
        $("#app_remove_btn").click(function () {
            if(layIndex != null
                || appId == "0"
                || appId == "1"
                || appId == "2"
                || appId == '${domainId}') return;
            $.ajax({
                type:'post',
                dataType:'json',
                url:'${pageContext.request.contextPath}/sys/app/appremove',
                contentType : "text/html;charset=UTF-8",
                data:appId,
                success:function (data) {
                    if(data != null && data.hasOwnProperty('status') && data.status == 'OK'){
                        appListLoad();

                        appId='${domainId}'
                        parentMenuId = '0';
                        $("#menumanage legend").text('运维支持系统 菜单列表');
                        menuListLoad();
                    }
                },
                error:function (error) {
                    console.log(error);
                }
            });
        });


        /**
         * 新建菜单按钮绑定事件
         */
        $("#menu_add_btn").click(function () {
            if(layIndex != null || parentMenuId == '-1') return;
            layIndex = layer.open({
                type: 2,
                title:'菜单添加',
                area: ['551px', '620px'],
                shade: 0,
                shadeClose:false,
                resize:true,
                content: '${pageContext.request.contextPath}/sys/menu/menuadd?appid='+appId + '&parentid=' + parentMenuId,
                cancel: function(index, layero){
                    layIndex = null;
                    layer.close(index);
                }
            });
        });
        /**
         * 编辑用户按钮绑定事件
         */
        $("#user_edit_btn").click(function () {
            if(layIndex != null) return;
            var checkStatus = table.checkStatus('userlist'),userid;
            if(checkStatus.data.length != 1){
                layer.msg('一次编辑只能选择一行', {icon: 5,anim: 6});
                return;
            }
            userid = checkStatus.data[0]['id'];
            layIndex = layer.open({
                type: 2,
                title:'用户编辑',
                area: ['450px', '300px'],
                shade: 0,
                shadeClose:false,
                resize:true,
                content: ['${pageContext.request.contextPath}/sys/user/useredit?userid='+userid, 'no']
            });
        });

        /**
         * 删除菜单按钮绑定事件
         */
        $("#menu_remove_btn").click(function () {
            var checkStatus = table.checkStatus('menulist'),menuids=[];
            if(checkStatus.data.length == 0){
                layer.msg('至少选择一行', {icon: 5,anim: 6});
                return;
            }
            for(var i = 0,len = checkStatus.data.length;i < len;i++){
                menuids.push(checkStatus.data[i]['menuId']);
            }

            $.ajax({
                type:'post',
                dataType:'json',
                url:'${pageContext.request.contextPath}/sys/menu/menuremove',
                contentType : "text/html;charset=UTF-8",
                data:menuids.join(","),
                success:function (data) {
                    if(data != null && data.hasOwnProperty('status') && data.status == 'OK'){
                        menuListLoad();
                    }
                },
                error:function (error) {
                    console.log(error);
                }
            });
        });

        /**
         * 返回上一级菜单
         */
        $('#parent_btn').click(function () {
            if(parentMenuId == '0'){ return }
            $.ajax({
                type:'get',
                url:'${pageContext.request.contextPath}/sys/menu/parentid?menuid=' + parentMenuId,
                contentType:'application/json;charset=utf-8',
                success:function (data) {
                    if(data != null && data != ""){
                        parentMenuId = data;
                        //重新加载菜单
                        menuListLoad();
                    }
                },
                error:function (error) {
                    console.log(error);
                }
            });
        })
    });
</script>
</body>
</html>
